<template>
  <div class="majorBank">
    <header>
      <div class="container">
        <div class="search">
          <el-input
            placeholder="输入关键词或感兴趣的专业"
            v-model="searchText"
            id="searchInput"
            @focus="searchBtnFocus"
            @blur="searchBtnBlur"></el-input>
          <el-button type="primary">搜索</el-button>
        </div>
        <div
          :style="recommendSize"
          class="recommend"
          @mouseover="recommendShow"
          @mouseout="recommendHide">
          <p>不知道学什么？试试下面的专业</p>
          <p>
            <span
              @click="searchMajor(item)"
              v-for="(item,index) in recommendList"
              :key="index">
              {{item}}
            </span>
          </p>
        </div>
      </div>
    </header>
    <main>
      <div class="container">
<!--   上侧head     -->
        <div class="mainHead">
          <div class="majorType">
            <span :class="level===1?'checked':''" @click="checkMajorType(1)">本科专业</span>
            <span :class="level===2?'checked':''" @click="checkMajorType(2)">专科专业</span>
          </div>
        </div>
<!--  左侧aside      -->
        <div class="mainAside">
          <div class="majorListB" v-show="level===1">
            <div
              class="majorBox"
              v-for="(item,index) in majorClassListB"
              :key="index"
              :class="item.classId===classId?'checked':''"
              @click="getMajorTree(item.classId)">
              <span class="name">{{item.className}}</span>
              <i class="num">({{item.majorSubCount}})</i>
            </div>
          </div>
          <div class="majorListB" v-show="level===2">
            <div
              class="majorBox"
              v-for="(item,index) in majorClassListZ"
              :key="index"
              :class="item.classId===classId?'checked':''"
              @click="getMajorTree(item.classId)">
              <span class="name">{{item.className}}</span>
              (<i class="num">{{item.majorSubCount}}</i>)
            </div>
          </div>
        </div>
<!--    右侧body    -->
        <div class="mainBody">
          <div class="majorInfo">
            <h3 class="name">{{majorTreeInfo.className}}</h3>
            <p>
              <span>{{majorTreeInfo.categoryNum}}个专业大类，</span>
              <span>{{majorTreeInfo.majorSubCount}}个专业</span>
              <span>杰出人物：{{majorTreeInfo.worthy}}</span>
            </p>
          </div>
          <div class="majorBox">
            <div
              class="majorClass"
              v-if="majorTreeInfo.categoryList.length"
              v-for="(item,index) in majorTreeInfo.categoryList"
              :key="index">
              <h4 class="majorClassTitle">{{item.className}}</h4>
              <div
                class="majorClassList"
                v-if="item.majorList.length">
                <div
                  class="majorClassBox"
                  v-for="(i,n) in item.majorList"
                  :key="n">
                  <span
                    @click="majorDetails(i.majorId)">
                    {{i.majorName}}
                    <i v-if="i.videoId>0" class="el-icon-video-play"></i>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
  import { majorClassList, majorTree, majorDetails, majorJob, searchHotWord, searchMajor } from '../../../api/bank/major'
    export default {
        name: "majorBank",
        data() {
            return {
                // 专业列表信息
                level: 1,  //  level=1  是本科列表 level=2 是专科列表
                majorClassListB: [],
                majorClassListZ: [],
                // 专业类
                classId: 1,
                majorTreeInfo: {},
                // 专业
                majorId: 1,
                searchText: '',
                isRecommendShow: false,
                recommendSize: {
                    width: '0',
                    height: '0',
                },
                recommendList: ['计算机','软件工程','大数据','电子','临床医学','会计','财务','金融','建筑','土木'],
            }
        },
        created() {

        },
        mounted() {
            Promise.all([
                this.majorClassList(),  // 专业列表(默认本科)
            ]).then(() => {
                this.majorTree();  // 当前专业信息
            })
        },
        methods: {
            // 查找专业列表
            async majorClassList() {
                const res = await majorClassList({
                  'level': this.level
                });
                if(res.data.status) {
                    if(this.level===1) {
                        this.majorClassListB = res.data.data;
                    }else{
                        this.majorClassListZ = res.data.data;
                    }
                }
            },
            // 查找专业树信息
            async majorTree() {
                const res = await majorTree({
                    'classId': this.classId
                });
                if(res.data.status) {
                    this.majorTreeInfo = res.data.data;
                }
            },
            // 获取焦点显示
            searchBtnFocus() {
                this.recommendSize = {width: '50%', height: '120px'};
            },
            // 失去焦点隐藏
            searchBtnBlur() {
                if(!this.isRecommendShow) {
                    this.recommendSize = {width: '0', height: '0'};
                }
            },
            // 鼠标移上显示推荐
            recommendShow() {
                this.recommendSize = {width: '50%', height: '120px'};
                this.isRecommendShow = true;
            },
            // 鼠标移出隐藏推荐
            recommendHide() {
                this.isRecommendShow = false;
            },
            // 查询专业
            searchMajor(major) {
                // 先获取焦点，再添加搜索专业
                const searchInput = document.getElementById('searchInput');
                searchInput.focus();
                this.searchText = major;
            },
            // 选择本科（专科）专业类型
            checkMajorType(level) {
                this.level = level;
                // 如果data没有缓存，请求
                if(!this.majorClassListB.length||!this.majorClassListZ.length) {
                    this.majorClassList();
                }
                if(this.level===1) {
                    this.classId = 1;
                    this.majorTree();
                }else{
                    this.classId = 107;
                    this.majorTree();
                }
            },
            getMajorTree(classId) {
                this.classId = classId;
                this.majorTree();
            },
            majorDetails(majorId) {
                this.majorId = majorId;
                // 跳转详情页
                let routeUrl = this.$router.resolve({
                    path: '/bank/major-details',
                    query: {
                        'majorId': this.majorId
                    }
                });
                window.open(routeUrl.href, '_blank');
            }
        }
    }
</script>

<style scoped lang="scss">
  // header
  header{
    .container{
      position: relative;
      .search{
        width: 100%;
        border-bottom: 1px solid #f5f5f5;
        padding: 20px 0 30px;
        .el-input{
          width: 50%;
          margin-right: 10px;
        }
      }
      .recommend{
        position: absolute;
        top: 65px;
        left: 0;
        background-color: #f5f5f5;
        border-radius: 8px;
        box-shadow: 1px 1px 4px #f2f2f2;
        transition: all 0.2s;
        overflow: hidden;
        height: 300px;
        p{
          padding: 10px 20px;
        }
        span{
          color: #409EFF;
          cursor: pointer;
          margin: 0 4px;
        }
        span:hover{
          color: #0982FF;
        }
      }
    }
  }
  // main
  main{
    min-height: 600px;
    .container{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .mainHead{
        width: 100%;
        padding: 20px;
        background-color: #f6f6f6;
        margin-bottom: 10px;
        .majorType{
          span{
            cursor: pointer;
            display: inline-block;
            font-size: 1.3rem;
            font-weight: bold;
            margin-right: 10px;
          }
          span.checked{
            color: #2f8efa;
          }
        }
      }
      .mainAside{
        width: 18%;
        background-color: #f2f2f2;
        .majorListB,.majorListZ{
          .majorBox{
            padding: 8px;
            margin: 8px;
            border-radius: 4px;
            cursor: pointer;
            span{
              font-size: 1rem;
            }
            i{
              font-style: normal;
              color: #666;
              font-size: 0.8rem;
            }
          }
          .majorBox.checked{
            background-color: #f9f9f9;
          }
        }
      }
      .mainBody{
        width: 80%;
        background-color: #f2f2f2;
        .majorInfo{
          margin: 10px;
          padding: 10px;
          background-color: #f9f9f9;
          h3{
            font-size: 1.5rem;
            padding-left: 10px;
            margin-bottom: 6px;
          }
          p{
            padding-left: 10px;
            span{
              font-size: 0.8rem;
              color: #000;
            }
            span:last-child{
              margin-left: 30px;
            }
          }
        }
        .majorBox{
          background-color: #f9f9f9;
          margin: 10px;
          padding: 10px 0;
          .majorClass{
            border-bottom: 1px dotted #ddd;
            margin: 6px 20px;
            h4{
              font-size: 1.1rem;
            }
            .majorClassList{
              display: flex;
              flex-wrap: wrap;
              padding: 10px 0;
              .majorClassBox{
                padding: 8px 14px;
                text-align: center;
                span{
                  display: inline-block;
                  border-radius: 2px;
                  padding: 4px;
                  cursor: pointer;
                  border: 1px solid #f9f9f9;
                  i{
                    margin-left: 2px;
                  }
                }
                span:hover{
                  background-color: #f4f4f4;
                  border: 1px solid #eee;
                }
              }
            }
          }
        }
      }
    }
  }
</style>